<script setup>
import { reactive, ref, onMounted, isVue3 } from './vue-demi/lib/index';
import Video from './video.vue';
import Sube from './sube.vue';

const url = ref(null);

const showError = ref(false);

const videoURL = ref("https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4")

const reg = /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/;

const videoOption = reactive({
  autoplay: true,
  controls: true,
  sources: [{
    src: videoURL.value,
    type: 'video/mp4',
  }],
});

function urlChange() {
  showError.value = false;
  if (reg.test(url.value)) {
    videoURL.value = url.value;
    videoOption.sources[0].src = url.value;
  } else {
    showError.value = true;
  }
}

onMounted(() => {
  console.log(`current is vue3? :${isVue3}`);
});

</script>

<template>
  <div class="hello-mm">
    <h1>Sube 发布测试😄</h1>
    <div class="label">
      <label class="label">
        <span>请输入视频地址：</span>
        <input v-model="url" @blur="urlChange" placeholder="请输入视频链接🔗" />
      </label>
      <div class="error" v-if="showError">😠，请输入一个正确的链接！</div>
    </div>
    <Video :url="videoURL"></Video>
    <!-- <Sube :options="videoOption" /> -->
  </div>
</template>

<style scoped>
.hello-mm {
  font-family: 'PingFang SC';
  padding: 30px 30px;
}

.hello-mm h1 {
  text-align: center;
}

.label {
  margin-bottom: 20px;
}

.label input {
  border: 1px solid rgb(212, 181, 210);
  border-radius: 3px;
  height: 25px;
  width: 800px;
  outline-style: none;
}

.label input:focus-visible {
  border: 2px solid rgb(228, 113, 220) !important;
}

.error {
  color: red;
}
</style>
